<template>
  <div>
    <div>
      <el-header
        style="text-align: center;width: 100%;height: 60px;
          background-color: #8fa1c7; font-size: 30px">
        <!--      <el-dropdown>-->
        <!--        <i class="el-icon-s-operation" style="margin-right: 12px; font-size: 30px"></i>-->
        <!--        <el-dropdown-menu slot="dropdown">-->
        <!--          <el-dropdown-item @click="insert" class="submit">新增</el-dropdown-item>-->
        <!--          <el-dropdown-item @click="">删除</el-dropdown-item>-->
        <!--        </el-dropdown-menu>-->
        <!--      </el-dropdown>-->
        <span>用户列表</span>
      </el-header>
      <!--    <el-page-header @back="goBack" style="font-size: 30px">-->
      <!--    </el-page-header>-->
      <el-table
        :data="tableData.filter(data => !search || data.cname.toLowerCase().includes(search.toLowerCase()))"
        height="470"
        border
        stripe
        style="width: 100%;">
        <el-table-column
          fixed
          prop="cid"
          label="ID"
          width="80">
        </el-table-column>
        <el-table-column
          prop="cimage"
          label="店铺头像"
          width="120">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.cimage"
              fit="fill"></el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="cname"
          label="用户名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="csex"
          label="性别"
          width="80">
        </el-table-column>
        <el-table-column
          prop="ctel"
          label="电话">
        </el-table-column>
        <el-table-column
          prop="caddress"
          label="地址">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱">
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          label="操作">
          <template slot-scope="scope">
            <!--        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>-->
            <el-button type="danger" size="small" round @click="handleEdit(scope.row.cid)">编辑</el-button>
            <!--          <el-button type="danger" size="small" round @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" @click="goTo('/ShopIndex')">返回首页</el-button>
<!--      <el-button type="success" size="small" round @click="goTo('/AddConsumer')">新增</el-button>-->
    </div>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    data() {
      return {

        tableData: [
          {
            cid: '',
            cname: '',
            csex: '',
            ctel: '',
            cimage: '',
            caddress: '',
            email: ''
          }
        ],
        search: ''
      }
    },
    methods: {
      goTo(path) {
        this.$router.replace(path);
      },
      handleEdit(cid) {
        this.$router.push("/updateConsumer/" + cid);
      },
      selectAllconsumers() {
        axios.get("/api/getAllConsumer").then(res => {
          this.tableData = res.data
        })
      },
      // handleAdd: function () {
      //   axios.post("/api/consumerRegistry", this.data).then(res => {
      //     if (res.data == 1) {
      //       this.$router.push("/consumer");
      //     } else {
      //       this.$message.error(res.data.message);
      //     }
      //   })
      // },
    },
    mounted() {
      this.selectAllconsumers();
    },
  }
</script>

<style scoped>
  fieldset {
    /* 表单页面居中，宽度50% ,legend颜色设置，legend圆角*/
    border: 2px solid #DCDFE6;
    text-align: left;
    border-radius: 8px;
    margin: 0 auto;
    width: 50%;
  }
</style>
